<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>弹性盒模型布局</title>
	<style type="text/css">
		
		ul{
			margin:0;
			padding:0;
			list-style:none;
			width:500px;
			height:500px;

			border:5px solid #000;
			background-color:gold;
			margin:50px auto 0;
			
			display:flex;
			justify-content:space-between;
			flex-wrap:wrap;
			/*    
				flex-start:多行整体靠上排列;
				flex-end:多行整体靠下排列;
				center:多行整体垂直居中排列;
				space-between:第一行子元素靠上顶格，最后一行子元素靠下顶格，中间行元素等分垂直的间距;
				space-around:第一行子元素靠上的间距和最后一行子元素靠下的间距是中间行元素间距的一半，中间行的元素等分垂直间距。

			*/

			align-content:space-around;

			
		}

		ul li{
			width:100px;
			height:50px;
			margin:10px;
			line-height:50px;
			text-align:center;
			color:#fff;
			background-color:green;
		}





	</style>

</head>
<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li>10</li>
		<li>11</li>
	</ul>
</body>
</html>